<template>
    <div class="clock-box">
      <div class="clock">{{currentTime}}</div>
      <div class="update">
        <div>数据更新时间：</div>
        <div class="time">{{currentNow}}</div>
      </div>
    </div>
  </template>
  
<script setup>
import { computed } from 'vue'
const formatTime = () => {
  const now = new Date()
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  return{year,month,day,hours,minutes,seconds}
}


const currentTime = computed(() => {
    const {hours,minutes,seconds}=formatTime()
  return `${hours}:${minutes}`
})

const currentNow = computed(() => {
    const {year,month,day,hours,minutes}=formatTime()
  return `${year}-${month}-${day} ${hours}:${minutes}`
})
</script>

<style lang="scss" scoped>
.clock-box {
    // border: 1px solid #fff;
    float: right;
    margin-top: 7px;
    width: 21.4rem;
    height: 3.4rem;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, #5E7694 0%, #0D1218 50%,#5E7694 100%); // 背景渐变
    color: #cff3f9; // 亮蓝色文字
    font-family: 'DIN Condensed', sans-serif;

  // 梯形裁剪效果
  clip-path: polygon(
    5px 0,
    calc(100% - 5px) 0,
    100% 50%,
    calc(100% - 5px) 100%,
    5px 100%,
    0 50%
  );

  .clock {//时间
    font-size: 2.5rem;
    font-weight: bold;
  }

  .update {//更新时间
    font-size: 1rem;
    font-style: italic;
  }
}
</style>